<template>
  <div
    class="detail_wrap"
    @touchstart.prevent="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    :style="{ height: `${detailHig}px` }"
    :class="{ 'detail-tit': detailTit }"
  >
    <span class="detail_text" v-if="!detailTit">
      详情
      <i class="iconnext iconfont"></i>
    </span>
    <div class="ml30">
      <h5>燃气井RQ14059燃气泄漏预警</h5>
      <span class="baidumap_icon"></span>
      <p>1.6km | 方兴大道与创新大道西北向</p>
      <div class="vol">
        5.4%VOL
        <b>Ⅱ级(重大)</b>
        <span>2019-09-11 13:32:12</span>
      </div>
    </div>
    <div class="gray_bg"></div>
    <div class="detail_box">
      <h2 class="dborder">
        监测曲线
        <i class="iconfont iconnext"></i>
      </h2>
      <div class="max_val">
        最高值：11.54%VOL
        <span>2019-09-11 04:38</span>
      </div>
     <div>
      <monitor-curve></monitor-curve>
     </div>
    </div>
    <div class="gray_bg"></div>
    <div class="detail_box">
      <h3 class="dborder">
        反馈结果
        <span>
          <button class="notdisposal">燃气泄漏</button>
          <i class="iconfont iconnext"></i>
        </span>
      </h3>
      <h3>
        处置状态
        <span class="disposal_status notdisposal">
          未处置
          <i class="iconfont iconnext"></i>
        </span>
      </h3>
    </div>
    <div class="gray_bg"></div>
    <div class="detail_box">
      <h2 class="dborder">监测设备</h2>
      <ul>
        <li><span>设备名称</span>可燃气体智能监测仪</li>
        <li><span>设备名称</span>可燃气体智能监测仪</li>
        <li><span>设备名称</span>可燃气体智能监测仪</li>
        <li><span>设备名称</span>可燃气体智能监测仪</li>
      </ul>
    </div>
    <div class="gray_bg"></div>
    <div class="detail_box">
      <h2 class="dborder">历史记录</h2>
      <h3 class="dborder">
        燃气泄漏
        <span>
          2次
          <i class="iconfont iconnext"></i>
        </span>
      </h3>
      <h3>
        沼气
        <span>
          2次
          <i class="iconfont iconnext"></i>
        </span>
      </h3>
    </div>
    <div class="empty" style="height:1.19rem"></div>
    <div class="wranning_btn">
      <button>预警反馈</button>
      <button>预警处置</button>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scope lang="stylus">
.detail_wrap
       overflow-y: scroll;
.detail_wrap.detail-tit {
  border-radius: 0;
   box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0);
}

.detail_wrap {
  position: absolute;
  width: 100%;
  background: #fff;
  bottom: 0;
  left: 0;
  z-index: 3;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);

  h5 {
    font-size: 0.36rem;
    color: #2a2c32;
    padding: 0.3rem 0 0.3rem 0;
  }

  p {
    color: #2a2c32;
    font-size: 0.24rem;
  }
}

.detail_text {
  width: 1.78rem;
  height: 0.41rem;
  background: url('../assets/images/detail_bg.png') no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
  line-height: 0.41rem;
  color: #428ee3;
  font-size: 0.24rem;

  i {
    font-size: 0.24rem;
  }
}

.vol {
  color: #faa762;
  font-size: 0.24rem;
  padding: 0.3rem 0;

  b {
    height: 0.33rem;
    padding: 0.08rem 0.16rem;
    font-weight: normal;
    border: #faa762 1px solid;
    border-radius: 0.03rem;
    font-size: 0.24rem;
    margin-left: 0.28rem;
  }

  span {
    float: right;
    padding-right: 0.3rem;
    color: #999999;
  }
}

.wranning_btn {
  height: 1.19rem;
  border-top: #dde0e4 1px solid;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 0.3rem;
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;

  button {
    color: #428ee3;
    border: #428ee3 1px solid;
    border-radius: 0.08rem;
    height: 0.56rem;
    width: 1.8rem;
    background: #fff;
    margin-right: 0.2rem;
  }
}

.baidumap_icon {
  width: 0.6rem;
  height: 0.6rem;
  background: #428ee3 url('../assets/images/here.png') no-repeat center;
  background-size: 50%;
  position: absolute;
  right: 0.3rem;
  top: 0.6rem;
  border-radius: 50%;
}

.ml30 {
  margin-left: 0.3rem;
}

.dborder {
  border-bottom: #dde0e4 1px solid;
}

.gray_bg {
  background: #f5f6fa;
  height: 0.1rem;
}

.detail_box {
  margin: 0 0.3rem;
  color: #2a2c32;
  font-size: 0.36rem;

  i {
    float: right;
    color: #c2c5c6;
  }

  h2 {
    height: 0.93rem;
    line-height: 0.93rem;
    line-height: 0.93rem;
  }

  h3 {
    height: 0.9rem;
    line-height: 0.9rem;
    font-weight: normal;
    position: relative;

    span {
      float: right;
      color: #666666;

      i {
        padding-left: 0.23rem;
      }

      button {
        width: 1.05rem;
        height: 0.4rem;
        border: 0;
        font-size: 0.24rem;
        border-radius: 8px 0 8px 0;
      }
    }
  }

  ul {
    padding: 0.05rem 0;

    li {
      line-height: 0.64rem;

      span {
        width: 2rem;
        display: inline-block;
        color: #666;
      }
    }
  }
}

.max_val {
  height: 0.5rem;
  line-height: 0.5rem;
  margin: 0.3rem 0;
  background: rgba(66, 142, 227, 0.16);
  padding-left: 0.24rem;
  color: #428ee3;
  font-size: 0.22rem;

  span {
    float: right;
    padding-right: 0.22rem;
  }
}
</style>
